<template>
  <div>
    <!-- -->
    <button @click="changeW">改变w值</button>
    {{nameList.w}}

    触发登录函数框：<input type="text" @keyup="login" name="" id="" @keypress="login" @keydown="login">
    <ul>
      <li>对象--- 索引</li>
      <li v-for="(person,index) of personInfo" :key="person.id">
          {{person.name}} ---{{person.age}} ---{{index}}
    </li>
    <hr>
      <li>键 ---- 值</li>
     <li v-for="(value,key) of people" :key="key">
      {{key}} ----{{value}}
    </li>

  <hr>
    <li>字符 ---- 索引</li>
    <li v-for="(value,key) of str" :key="key">
      {{key}} ----{{value}}
    </li>
    <hr>

    <li>数字 ---- 索引</li>
    <!-- 遍历数字key值容易报错 -->
    <li v-for="(num,index)  in 3" :key="index+'a'">
      {{num}} -----  {{index}}
      </li> 
    </ul>
  </div>
</template>

<script>
import Vue from 'vue';


export default {
  name: 'DeepComputed',

  data() {
    return {
      nameList:{
        w:"王麻子",
      },
      personInfo:[
                {
                  id: '001',
                  name: '张三',
                  age: 25,
                  gender: '男'
                },
                {
                  id: '002',
                  name: '李四',
                  age: 30,
                  gender: '女'
                },
                {
                  id: '003',
                  name: '王五',
                  age: 22,
                  gender: '男'
                }
              ],
      people:{
                  id: '004',
                  name: '赵六',
                  age: 28,
                  gender: '男'
                },

      str:"abcdefg",
    };
  },

  mounted() {
    
  },

  methods: {
    changeW(){
        this.nameList.w=Math.random(1,10).toFixed(2);
    },

    login(e){
      console.log(e.key);
    }
  },
  watch:{
    "nameList.w"(newVal,oldVal){  //监视某个属性变化
    
    },
      nameList:{
        // immediate:true,//是否在属性没有变化时立即执行一次handler函数
        deep:true, //默认只监视一层,开启之后可以监视到属性变化
        handler(newVal,oldVal){
          console.log("属性监视执行");
          // console.log("新属性"+newVal);
          newVal.array.forEach(e => {
            console.log(e);
          });
          console.log("老属性"+oldVal);
        }
      },
  }
};
</script>